
.tooltips-top,
.tooltips-bottom,
.tooltips-left,
.tooltips-right {
    position: relative;

    &:before,
    &:after{
        position: absolute;
        white-space: nowrap;
        opacity: 0;
        transition-property: transform opacity;
        transition-duration: .3s;
        transition-timing-function: ease; 
    }

    &:before{
        content: "";
        border-color: transparent;
        border-width: 6px;
        border-style: solid;
    }

    &:after{
        content:attr(data-tooltips);
        padding: 2px 5px;
        border-radius: 5px;
    }
}

.tooltips-top{
    &:before{
        background-color: transparent;
        border-top-color: @tooltipsDefaultBgColor;
    }

     &:before {
        transform: translate3d(-50%,12px,0); 
     }

     &:after{
        transform: translate3d(-50%,6px,0);
     }

    &:before,
    &:after {
        bottom:100%;
        left: 50%;
    }

    &:hover:before {
        transform: translate3d(-50%,6px,0);
        opacity: 1;
    }

    &:hover:after {
        transform: translate3d(-50%,-6px,0);
        opacity: 1;
    }
}

.tooltips-bottom{
    &:before {
        background-color: transparent;
        border-bottom-color: @tooltipsDefaultBgColor;
    }

    &:before {
        transform: translate3d(-50%,-12px,0);
    }

     &:after{
        transform: translate3d(-50%,-6px,0);
    }

    &:before,
    &:after {
        top:100%;
        left: 50%;
    }

    &:hover:before {
        transform: translate3d(-50%,-6px,0);
        opacity: 1;
    }

    &:hover:after{
        transform: translate3d(-50%,6px,0);
        opacity: 1;
    }
}

.tooltips-right{
    &:before{
        background-color: transparent;
        border-right-color: @tooltipsDefaultBgColor;

        
    }

    &:before{
        left:100%;
        transform: translate3d(-12px,-50%,0);
    }

    &:after{
        left:100%;
        transform: translate3d(-6px,-50%,0);
    }

    &:before,
    &:after{
        left:100%;
        top: 50%;
    }

    &:hover:before{
        transform: translate3d(-6px,-50%,0);
        opacity: 1;
    }

    &:hover:after{
        transform: translate3d(6px,-50%,0);
        opacity: 1;
    }
}

.tooltips-left{
    &:before{
        background-color: transparent;
        border-left-color: @tooltipsDefaultBgColor;
    }   

    &:before{
        transform: translate3d(12px,-50%,0);
    }

    &:after{
        transform: translate3d(6px,-50%,0);
    }

    &:before,
    &:after{
        right:100%;
        top: 50%;
    }

    &:hover:before{
        transform: translate3d(6px,-50%,0);
        opacity: 1;
    }

    &:hover:after{
        transform: translate3d(-6px,-50%,0);
        opacity: 1;
    }
}

.tooltips-default{

    &:after{
        color: @tooltipsDefaultColor;
        background-color: @tooltipsDefaultBgColor;
    }

    &.tooltips-top:before {
        border-top-color: @tooltipsDefaultBgColor;
    }

    &.tooltips-bottom:before {
        border-bottom-color: @tooltipsDefaultBgColor;
    }

    &.tooltips-left:before {
        border-left-color: @tooltipsDefaultBgColor;
    }

    &.tooltips-right:before {
        border-right-color: @tooltipsDefaultBgColor;
    }
}



.tooltips-primary {
    
    &:after{
        color: @tooltipsPrimaryColor;
        background-color: @tooltipsPrimaryBgColor;
    }

    &.tooltips-top:before {
        border-top-color: @tooltipsPrimaryBgColor;
    }

    &.tooltips-bottom:before {
        border-bottom-color: @tooltipsPrimaryBgColor;
    }

    &.tooltips-left:before {
        border-left-color: @tooltipsPrimaryBgColor;
    }

    &.tooltips-right:before {
        border-right-color: @tooltipsPrimaryBgColor;
    }
}

.tooltips-secondary {

    &:after{
        color: @tooltipsSecondaryColor;
        background-color: @tooltipsSecondaryBgColor;
    }

    &.tooltips-top:before{
        border-top-color: @tooltipsSecondaryBgColor;
    }

    &.tooltips-bottom:before{
        border-bottom-color: @tooltipsSecondaryBgColor;
    }

    &.tooltips-left:before{
        border-left-color: @tooltipsSecondaryBgColor;
    }

    &.tooltips-right:before{
        border-right-color: @tooltipsSecondaryBgColor;
    }
}

.tooltips-success{

    &:after{
        color: @tooltipsSuccessColor;
        background-color: @tooltipsSuccessBgColor;
    }   
    
    &.tooltips-top:before{
        border-top-color: @tooltipsSuccessBgColor;
    }

    &.tooltips-bottom:before{
        border-bottom-color: @tooltipsSuccessBgColor;
    }

    &.tooltips-left:before{
        border-left-color: @tooltipsSuccessBgColor;
    }

    &.tooltips-right:before{
        border-right-color: @tooltipsSuccessBgColor;
    }
}

.tooltips-warning{

    &:after{
        color: @tooltipsWarningColor;
        background-color: @tooltipsWarningBgColor;
    }

    &.tooltips-top:before{
        border-top-color: @tooltipsWarningBgColor;
    }

    &.tooltips-bottom:before{
        border-bottom-color: @tooltipsWarningBgColor;
    }

    &.tooltips-left:before{
        border-left-color: @tooltipsWarningBgColor;
    }

    &.tooltips-right:before{
        border-right-color: @tooltipsWarningBgColor;
    }
}

.tooltips-error{

    &:after{
        color: @tooltipsErrorColor;
        background-color: @tooltipsErrorBgColor;
    }

    &.tooltips-top:before{
        border-top-color: @tooltipsErrorBgColor;
    }

    &.tooltips-bottom:before{
        border-bottom-color: @tooltipsErrorBgColor;
    }

    &.tooltips-left:before{
        border-left-color: @tooltipsErrorBgColor;
    }

    &.tooltips-right:before{
        border-right-color: @tooltipsErrorBgColor;
    }
}
